/* Default toggle checkbox. */
/*
 * <div class="mega-switch">
 *     <div class="mega-feature-switch"></div>
 * </div>
* 'toggle-on' is addition class if checkbox is active
* 'red' is addition class if active state is red
*/
.mega-switch {
    box-shadow: inset 0 0 0 1px var(--switch-border-inactive);
    background: var(--switch-fill-inactive);
    border-radius: 40px;
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 24px;
    width: 48px;
    box-sizing: border-box;
}
.rtl .mega-switch {
    float: left;
}
.mega-switch.toggle-on {
    background: var(--switch-fill-active);
    box-shadow: inset 0 0 0 1px var(--switch-border-active);
}
.mega-switch .mega-feature-switch {
    background: var(--switch-handle-fill);
    border: 1px solid var(--switch-handle-border);
    border-radius: 50%;
    height: 16px;
    width: 16px;
    margin: 3px;
    box-sizing: content-box;
    background-clip: padding-box;
    transition: margin-inline-start 100ms ease-in-out;
    cursor: pointer;
    --mask-color: var(--switch-handle-inactive-icon);
}
.mega-switch.toggle-on .mega-feature-switch {
    margin-inline-start: 27px;
    --mask-color: var(--switch-handle-active-icon);
}

/* Mobile switches */

/* @todo: use similar classnames for both mobile and desktop clients */

.mobile .mega-switch {
    background: var(--mobile-page-background);
    border: 1px solid var(--mobile-selection-control);
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex: none;
}
.mobile .mega-switch.toggle-on {
    background: var(--mobile-selection-control);
    box-shadow: none;
}
.mobile .mega-switch.disabled {
    border: 1px solid var(--mobile-border-disabled);
    opacity: 1;
}
.mobile .mega-switch.toggle-on.disabled {
    background: var(--mobile-border-disabled);
}
.mobile .mega-switch .mega-feature-switch::after {
    background: var(--mobile-selection-control);
    color: var(--mobile-page-background);
    border-radius: 50%;
}
.mobile .mega-switch.toggle-on .mega-feature-switch::after {
    background: var(--mobile-page-background);
    color: var(--mobile-selection-control);
    border-radius: 50%;
}
.mobile .mega-switch.disabled .mega-feature-switch::after {
    background: var(--mobile-border-disabled);
}
.mobile .mega-switch.toggle-on.disabled .mega-feature-switch::after {
    background: var(--mobile-page-background);
    color: var(--mobile-border-disabled);
}
.mobile .mega-feature-switch {
    border: none;
    transition: .1s ease-in-out;
}
